<template>
  <div class="container">
    <headComponent></headComponent>
    <div class="row">
      <div class="col-xs-6" style="padding-left: 0px">
          <img class="pull-right" v-bind:src="item.src" alt="" style="height: 600px;width: 505px;border: 2px #CECECE solid">
      </div>
      <div class="col-xs-6">
        <div class="row" style="margin-top: 40px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">物品名称:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{item.lostPropertyName}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">遗失时间:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{item.time}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">遗失地点:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{item.location}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">遗失人:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{info.name}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">联系方式:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{info.tel}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <p style="font-size: 30px;font-weight: bold;padding-left: 30px" >物品是否已经找到:</p>
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949" style="margin-top: 15px;margin-left: 20px">
          </el-switch>
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 10px">
      <div class="col-xs-6">
        <div class="row">
          <div class="col-xs-5 text-right" style="padding-right: 5px">
            <p style="font-size: 30px;font-weight: bold">物品详细描述:</p>
          </div>
          <div class="col-xs-7" style="padding-left: 10px;padding-top: 10px">
            <p style="font-size: 20px;height: 300px;width: 230px;border: 1px #ECECEC solid">{{item.descript}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 30px">
      <div class=" col-xs-12 text-center">
        <button type="button" class="btn btn-danger" style="font-size: 30px;font-weight: bold">删除该寻物启事</button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "lostGoodsDetailsPage",
      data() {
        return {
          value: false,
          item:this.$route.params.item,
          info:{}
        }
      },
      created() {
          var self=this
         axios.get(this.rootUrl+"/info/userInfo",{
           params:{userId:this.$route.params.item.userId}
         })
        .then(function (resp) {
          self.info=resp.data
        })
      }
    }

</script>

<style scoped>
</style>
